<script setup lang="ts">

import {onMounted} from "vue";
import {HideNavbar, showNavbar} from "@/utils/common";


onMounted(() => {
  document
      .querySelector('body')
      ?.setAttribute('style', 'background-color:var(--background-color);')
  if (sessionStorage.getItem('isReloading') === 'true') {
    sessionStorage.removeItem('isReloading'); // 清除标志
    router.push('/diagnosis'); // 使用 Vue Router 进行重定向
  }

  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('isReloading', 'true');
  });
})

const starting = ref(false)

const start = () => {
  starting.value = true;
  HideNavbar()
  router.push('/diagnosis/history')
}
const router = useRouter()
const route = useRoute()
const cancel = () => {
  router.go(-1);
  if(route.path === '/diagnosis/history') {
    starting.value = false;
    showNavbar()
  }
}

</script>

<template>
  <div class="header" v-if="starting && route.path.split('/').filter(Boolean).pop()!='main'">
    <button class="back-button" @click="cancel">
      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>
  </div>
  <router-view @start="start"> </router-view>
</template>

<style scoped lang="css">

.header {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100; /* 确保它在其他内容之上 */
}

.back-button {
  margin-left: 10px; /* 距离左边的间距 */
  margin-top: 10px; /* 距离上边的间距 */
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 48px;
}

.back-button:hover {
  color: #333;
}

.cancel {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50px;
  bottom: 100px;
}

</style>